<template>
	<view>
		<!-- 底部 -->
		<div class="bottomItem">
			<div class="threeMessages">
				<span :class="arr===1?'actives':''" @click="switchingState(1)">活动记录</span>
				<span :class="arr===2?'actives':''" @click="switchingState(2)">基本信息</span>
				<span :class="arr===3?'actives':''" @click="switchingState(3)">相关信息</span>
			</div>
			<div class="threeContainer">
				<!-- 活动记录 -->
				<div class="activityRecord" v-if="arr===1">
					<u-icon name="photo" color="#2979ff" size="50"></u-icon>
					<span>
						<text>admin</text>
						<text>2021-08-03&nbsp;10:56</text>
						<text>admin创建了客户:&nbsp;大跃进事业部</text>
					</span>
				</div>
				<!-- 基本信息 -->
				<div class="information" v-if="arr===2">
					<div>
						<i></i>
						<span>基本信息</span>
					</div>
					<div class="top">
						<!-- 基本信息数据 -->
							<u-form :model="form" ref="uForm" label-position="top" label-width="70" >
								<u-form-item label="部门" >
									<u-input v-model="form.department"/>
								</u-form-item>
								<u-form-item label="客户名称">
									<u-input v-model="form.name" />
								</u-form-item>
								<u-form-item label="客户来源">
									<u-input v-model="form.source"  />
								</u-form-item>
								<u-form-item label="多选">
									<u-input v-model="form.multiple"  />
								</u-form-item>
								<u-form-item label="手机">
									<u-input v-model="form.phone"  />
								</u-form-item>
								<u-form-item label="电话">
									<u-input v-model="form.telePhone"  />
								</u-form-item>
								<u-form-item label="网址">
									<u-input v-model="form.http"  />
								</u-form-item>
								<u-form-item label="邮箱">
									<u-input v-model="form.eMail"  />
								</u-form-item>
								<u-form-item label="客户行业">
									<u-input v-model="form.industry"  />
								</u-form-item>
								<u-form-item label="客户级别">
									<u-input v-model="form.level"  />
								</u-form-item>
								<u-form-item label="下次练习时间">
									<u-input v-model="form.lastTime"  />
								</u-form-item>
								<u-form-item label="备注">
									<u-input v-model="form.remarks"  />
								</u-form-item>
								<u-form-item label="单行文本">
									<u-input v-model="form.lineText"  />
								</u-form-item>
								<u-form-item label="地区定位">
									<u-input v-model="form.address"  />
								</u-form-item>
								<!-- 明细表格1 -->
								<div class="one">明细表格1</div>
								<u-form-item label="客户单号">
									<u-input v-model="detailTable.oddNumbers"  />
								</u-form-item>
								<u-form-item label="货物名称">
									<u-input v-model="detailTable.name"  />
								</u-form-item>
								<u-form-item label="件数">
									<u-input v-model="detailTable.number"  />
								</u-form-item>
								<u-form-item label="体积">
									<u-input v-model="detailTable.volume"  />
								</u-form-item>
								<u-form-item label="重量">
									<u-input v-model="detailTable.weight"  />
								</u-form-item>
								<u-form-item label="多行文本">
									<u-input v-model="detailTable.multilineText"  />
								</u-form-item>
								<!-- 明细表格2 -->
								<div class="two">明细表格2</div>
								<u-form-item label="客户单号">
									<u-input v-model="detailTable2.oddNumbers"  />
								</u-form-item>
								<u-form-item label="货物名称">
									<u-input v-model="detailTable2.name"  />
								</u-form-item>
								<u-form-item label="件数">
									<u-input v-model="detailTable2.number"  />
								</u-form-item>
								<u-form-item label="体积">
									<u-input v-model="detailTable2.volume"  />
								</u-form-item>
								<u-form-item label="重量">
									<u-input v-model="detailTable2.weight"  />
								</u-form-item>
								<u-form-item label="多行文本">
									<u-input v-model="detailTable2.multilineText"  />
								</u-form-item>
								<!-- 系统信息 -->
								<div>
									<span>系统信息</span>
								</div>
								<u-form-item label="负责人">
									<u-input v-model="systemInformation.people"  />
								</u-form-item>
								<u-form-item label="最后跟进记录">
									<u-input v-model="systemInformation.lastRecord"  />
								</u-form-item>
								<u-form-item label="创建人">
									<u-input v-model="systemInformation.createPeople"  />
								</u-form-item>
								<u-form-item label="创建时间">
									<u-input v-model="systemInformation.createTime"  />
								</u-form-item>
								<u-form-item label="更新时间">
									<u-input v-model="systemInformation.updateTime"  />
								</u-form-item>
								<u-form-item label="最后更新时间">
									<u-input v-model="systemInformation.lastUpdateTime"  />
								</u-form-item>
								<u-form-item label="相关团队">
									<u-input v-model="systemInformation.team"  />
								</u-form-item>
								<u-form-item label="责任人获取客户时间">
									<u-input v-model="systemInformation.getTime"  />
								</u-form-item>
								<u-form-item label="所属部门">
									<u-input v-model="systemInformation.department"  />
								</u-form-item>
						</u-form>
					</div>
				</div>
				<!-- 相关信息 -->
				<div v-if="arr===3">
					<u-empty text="暂无相关信息" mode="message" icon-size="180" font-size="60" margin-top="120"></u-empty>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:1,//切换active类名
				//基本信息数据
				form:{
					department:'销售一部',//部门
					name:'大跃进事业部',//客户名称
					source:'广告',//客户来源
					multiple:'选1,选2,选3,选4',//多选
					phone:'',//手机
					telePhone:'',//电话
					http:'',//网址
					eMail:'',//邮箱
					industry:'IT',//行业
					level:'A(重点客户)',//客户级别
					lastTime:'2021-08-03 10:55:58',//下次联系时间
					remarks:'',//备注
					lineText:'单行文本记录', //单行文本
					address:'',//地区定位
				},
				//明细表格1
				detailTable:{
					oddNumbers:'111',//单号
					name:'111',//名称
					number:'111',//件数
					volume:'111',//体积
					weight:'111',//重量
					multilineText:'111'	//多行文本
				},
				//明细表格2
				detailTable2:{
					oddNumbers:'222',//单号
					name:'222',//名称
					number:'222',//件数
					volume:'222',//体积
					weight:'222',//重量
					multilineText:'222'	//多行文本
				},
				//系统信息
				systemInformation:{
					people:'admin',//负责人
					lastRecord:'',//最后跟进记录
					createPeople:'admin',//创建人
					createTime:'2021-08-03 10:56:58',//创建时间
					updateTime:'2021-08-03 10:56:58',//更新时间
					lastUpdateTime:'2021-08-03 10:56:58',//最后跟进时间
					team:'',//相关团队
					getTime:'2021-08-03 10:56:58',//负责人获取客户时间
					department:'全公司',//所属部门
				}
			};
		},
		methods:{
			//切换active类名的方法
			switchingState(arr){
				 this.arr=arr
			}
		}
	}
</script>

<style lang="less" scoped>
.bottomItem{
	margin-top: 40rpx;
	.threeMessages{
		display: flex;
		justify-content: space-around;
	}
	.threeContainer{
		// 活动记录
		.activityRecord{
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			height: 300rpx;
			span{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-top: 10rpx;
				text{
					margin-top: 10rpx;
				}
			}
		}
		//基本信息
		.information{
			background-color: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
			>div{
				font-size: 35rpx;
				font-weight: 700;
				position: relative;
				>i{
					position: absolute;
					top: 15rpx;
					left: 0;
					margin-right:20rpx;
					display: inline-block;
					height: 15rpx;
					width: 15rpx;
					background: #000;
					border-radius: 50%;
				}
				>span{
					margin-left: 20rpx;
				}
			}
			.top{
				>div{
					font-size: 35rpx;
					font-weight: 700;
					height: 70rpx;
					background: #F1F1F1;
					line-height: 70rpx;
				}
			}
		}
		// 相关信息
		
		
	}
}

.actives{
	border-bottom: 4rpx solid #366df6;
}
</style>
